<script setup>
import { ref } from 'vue'
import { getGoodsListApi } from '@/apis/goods.js'
import { onShow, onLoad } from '@dcloudio/uni-app'
import { route } from 'uview-plus'
const current = ref(0)
const params = ref({
  pageNo: 1,
  pageSize: 10,
  sortBy: '',
  goodsName: '',
  categoryId: null
})
const list = ref([
  {
    name: '推荐',
    sortBy: ''
  },
  {
    name: '新品',
    sortBy: 'create_time'
  },
  {
    name: '价格',
    sortBy: 'selling_price'
  }
])
onLoad((e) => {
  if (e && e.categoryId) {
    params.value.categoryId = e.categoryId
  }
})


const goodsList = ref([])
const rightClick = () => {
  goodsList.value = []
  params.value.pageNo = 1
  getGoodsList()
}

onShow(() => {
  goodsList.value = []
  params.value.pageNo = 1
  getGoodsList()
})
const pages = ref(0)
const getGoodsList = async () => {
  const res = await getGoodsListApi(params.value)
  goodsList.value = goodsList.value.concat(res.data.data.list)
  pages.value = res.data.data.pages
}

const subsectionChange = (index) => {
  params.value.pageNo = 1 
  goodsList.value = []
  params.value.sortBy = list.value[index].sortBy
  getGoodsList()
}

const onClear = () => {
  params.value.goodsName = ''
  params.value.pageNo = 1
  goodsList.value = []
  getGoodsList()
}

// 加载更多
const onScrolltolower = () => {
  params.value.pageNo++
  if (params.value.pageNo > pages.value) {
    return
  }
  getGoodsList()
}

</script>

<template>
  <view class="page">
    <!-- 导航栏 -->
    <view class="nav-box">
      <up-navbar :placeholder="true" :height="50" bgColor="#fff" @rightClick="rightClick" :autoBack="true">

        <template #center>
          <up-search :showAction="false" v-model="params.goodsName" class="search-box" @clear="onClear"></up-search>
        </template>
        <template #right>
          <up-text text="搜索"></up-text>
        </template>
      </up-navbar>
    </view>
    <!-- 筛选 -->
    <view class="subsection">
      <view class="u-demo-block__content">
        <up-subsection :list="list" mode="subsection" :current="current" activeColor="#52ABAD"
          @change="subsectionChange" inactiveColor="#52ABAD" style="height: 80rpx;"></up-subsection>
      </view>
    </view>
    <!-- 商品列表 -->
    <view class="list" v-if="goodsList && goodsList.length > 0">
      <scroll-view class="list-box" scroll-y @scrolltolower="onScrolltolower">
        <view class="item" v-for="item in goodsList" :key="item.id"
          @click="route({ url: '/pages/goods/index', params: { id: item.id } })">
          <up-image width="200rpx" height="200rpx" :src="item.goodsCoverImg"></up-image>
          <view class="text">
            <up-text :text="item.goodsName"></up-text>
            <up-text style="margin: 20rpx 0 ; " color="#ccc" size="24rpx" :text="item.goodsIntro"></up-text>
            <up-text mode="price" color="#55ACAE" :text="item.sellingPrice"></up-text>
          </view>
        </view>
      </scroll-view>
    </view>
    <!-- 空 -->
    <view v-else>
      <up-empty mode="search" icon="/static/images/data.png">
      </up-empty>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.nav-box {
  .search-box {
    padding: .5rem 3rem .5rem;
  }
}

.list-box {
  height: calc(100vh - 50px - 80rpx);

  .item {
    display: flex;
    padding: 1rem;
    border-bottom: 1px solid #ccc;

    .text {
      flex: 1;
      margin-left: 30rpx;
    }
  }
}
</style>